接續昨天的 Create 頁面，今天要完成圖片上傳和預覽的功能

圖片上傳到資料庫的方法據我所知有兩種方法：

1. 如果你的圖片儲存在磁碟上，或是存在網路空間，可以資料庫欄位中以字串保存圖片的路徑
2. 直接把圖片以二進位型態儲存在資料庫中

這邊以第二種方法為例，直接把圖片轉成二進位存進資料庫

圖片上傳

前端會用 <input type="file" name="myimg" /> 作為圖片檔案上傳的欄位
( 如果是用表單<form>的話，要注意編碼為 enctype="multipart/form-data"，才能正確上傳檔案 )

<div class="form-group">
    <label asp-for="Image" class="control-label"></label>
    <input type="file" name="myimg" id="myimg" class="form-control-file">
    <span asp-validation-for="Image" class="text-danger"></span>
</div>

後端用 IFormFile myimg 來接收欄位的檔案，並且用 MemoryStream.ToArray() 把檔案轉成位元組陣列，
詳細用法如下：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Product product, IFormFile myimg)
{
    if (ModelState.IsValid)
    {
        if (myimg != null)
        {
            using (var ms = new MemoryStream())
            {
                myimg.CopyTo(ms);
                product.Image = ms.ToArray();
            }
        }
        _context.Add(product);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewData["Categories"] = new SelectList(
        _context.Set<Category>(), "Id", "Name", product.CategoryId);
    return View(product);
}

圖片預覽

圖片預覽是一讀取到檔案就要在前端動態呈現的
所以這邊會需要用上javascript來實現預覽圖片的功能
並用一個<img>欄位來顯示預覽的圖片

<img id="preview" style="max-height:200px;" />

<script>
    $('#myimg').on('change', function (e) {
        const file = this.files[0];
        const objectURL = URL.createObjectURL(file);    // 使用 createObjectURL 產生圖片url
        $('#preview').attr('src', objectURL);
    });
</script>

最後看一下成果